<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${isRegister?"注册":"找回密码"}</title>
    <base href=http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="static/css/login.css">
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="static/js/jquery.min.js"></script>
</head>

<body>
<div class="login">
    <div class="center">
        <div id="div_login">
            <div class="inputLi">
                <h1 class="title">${isRegister?"Register":"Forget"}</h1>
                <p id="error_tip">
                    <c:if test="${sessionScope.message !=null}">
                        ${sessionScope.message}
                    </c:if>
                </p>
            </div>
            <form id="register_form" action="user/register" method="post">
                <div class="inputLi">
                    <strong>账户</strong>
                    <input id="username" name="username" type="text" placeholder="请输入手机号">
                </div>
                <div class="inputLi">
                    <strong>${isRegister?"密码":"新密码"}</strong>
                    <input id="password1" name="password" type="password" placeholder="请输入密码，不低于6位">
                </div>
                <div class="inputLi">
                    <strong>确认密码</strong>
                    <input id="password2" type="password" placeholder="请再次输入">
                </div>
                <div id="questionTpl" style="display: none;padding: 16px;">
                    <h3 style="display: block;width: 100%;text-align: center;margin-bottom: 10px;">
                        为了能够找回密码，请先定义一个问题</h3>
                    <div class="inputLi">
                        <strong>问题</strong>
                        <input id="question" name="question" title="" type="text" placeholder="请自定义一个问题">
                    </div>
                    <div class="inputLi">
                        <strong>答案</strong>
                        <input id="answer" name="answer" title="" type="text" placeholder="请输入你的答案">
                    </div>
                    <div style="text-align: right;padding-right: 30px;margin-top: 16px">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="submitForm()">确定
                        </button>
                    </div>
                </div>
                <div id="answerTpl" style="display: none;padding: 16px;">
                    <h3 style="display: block;width: 100%;text-align: center;margin-bottom: 10px;">
                        请先回答问题</h3>
                    <div class="inputLi">
                        <strong>问题</strong>
                        <input id="question2" readonly value=""/>
                    </div>
                    <div class="inputLi">
                        <strong>答案</strong>
                        <input id="answer2" name="answer" title="" type="text" placeholder="请输入你的答案">
                    </div>
                    <div style="text-align: right;padding-right: 30px;margin-top: 16px">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="submitForm2()">确定
                        </button>
                    </div>
                </div>
            </form>
            <div class="inputLi">
                <button id="register">${isRegister?"注册":"确定"}</button>
            </div>
            <c:if test="${isRegister}">
                <p class="tip" style="float: left;"><a href="user/registerOrForget?isRegister=false">忘记密码?</a></p>
            </c:if>
            <p class="tip" style="float: right;"><a href="login">已有账号，去登录?</a></p>
        </div>
    </div>
</div>
<script type="text/javascript">

    let openIndex = 0;
    let getAnswer = "";

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    $(document).ready(function () {
        $("#register").click(function () {
            var username = $("#username").val();
            var password1 = $("#password1").val();
            var password2 = $("#password2").val();
            if (username === "" || password1 === "" || password2 === "") {
                $("#error_tip").text("用户名或密码不能为空");
            } else if (username.length !== 11) {
                $("#error_tip").text("手机号码不正确");
            } else if (password1 !== password2) {
                $("#error_tip").text("两次密码不一致");
            } else if (password1.length < 6) {
                $("#error_tip").text("密码长度不得低于6位");
            } else {
                if ('${isRegister}' === 'true') {
                    layer.open({
                        type: 1
                        , content: $('#questionTpl')
                        , title: '提示'
                        , area: '360px'
                        , resize: false
                    });
                    $("#error_tip").text("");
                } else {
                    $.ajax({
                        url: "http://localhost/campus/user/getQuestion"
                        , type: "post"
                        , data: "phone=" + username
                        , async: false
                        , success: function (data) {
                            if (data.success) {
                                $("#question2").val(data.data.user.question);
                                getAnswer = data.data.user.answer;
                                openIndex = layer.open({
                                    type: 1
                                    , content: $('#answerTpl')
                                    , area: '360px'
                                    , resize: false
                                    , title: "回答问题"
                                });
                            } else {
                                layer.msg(data.message, {
                                    icon: 2
                                    , time: 1000
                                })
                            }
                        }
                    });
                }
            }
        });
    });


    function submitForm() {
        let question = $('#question').val();
        let answer = $('#answer').val();

        if (question === "" || answer === "") {
            layer.msg("问题答案不能为空", {
                icon: 2
                , time: 1000
            });
            return false;
        }
        if (question.length > 100 || answer.length > 100) {
            layer.msg("问题答案的长度不能太长", {
                icon: 2
                , time: 1000
            });
            return false;
        }
        $("#register_form").submit();
    }

    function submitForm2() {
        var username = $("#username").val();
        var password1 = $("#password1").val();
        if ($('#answer2').val() === getAnswer) {
            $.ajax({
                url: "http://localhost/campus/user/forget"
                , type: "post"
                , data: "phone=" + username + "&password=" + password1
                , async: false
                , success: function (data) {
                    let icon = data.success ? 1 : 2;
                    layer.msg(data.message, {
                        icon: icon
                        , time: 1000
                    });
                    if (data.success) {
                        layer.close(openIndex);
                    }
                }
            });
        } else {
            layer.msg("回答错误", {
                icon: 2
                , time: 1000
            })
        }
    }
</script>
</body>

</html>
